import React, {useEffect, useState} from 'react'
import './index.scss'
import axios from 'axios'
import {Button, Input} from "antd";

function Index() {
  const [arr, setArr] = useState([])

  useEffect(() => {
    (async () => {
      let res = await axios({
        url: "data.txt"
      })

      console.log(res.data);
      // let arr = res.data.split(' ')

      let arr = (await axios({
        method: "post",
        url: "/api/nodejieba/cut",
        data: {
          content: res.data
        }
      })).data.data
      let size = arr.length
      let percentHidden = 0.1

      setArr(arr.map(x => {
        let isHidden = Math.random() < percentHidden
        return {
          isHidden,
          val: isHidden ? '____' : x,
          ans: x,
          error: '',
          color: 'green'
        }
      }))
    })()

  }, [])

  function createAndPlayVideo() {
    // 创建视频元素
    const video = document.createElement('video');

    // 设置视频属性
    video.style.setProperty('display', 'none');
    video.width = 640;
    video.height = 360;
    video.controls = true;

    // 添加视频源
    const source = document.createElement('source');
    source.src = 'unbelievable.mp3'; // 替换为实际视频文件路径
    source.type = 'audio/mp3';
    video.appendChild(source);

    // 将视频元素添加到容器中
    const videoContainer = document.getElementById('videoContainer');
    videoContainer.innerHTML = ''; // 清空容器中的内容
    videoContainer.appendChild(video);

    // 播放视频
    video.play();
  }

  return (
      <>
        <div id={'videoContainer'}></div>
        <div className={'main'}>
          {
            arr.map((x, i) => {
              return <React.Fragment key={i}>
                {
                  x.isHidden
                      ? <>
                        <input onChange={e => {
                          if (x.ans === e.target.value) {
                            x.error = ''
                            x.color = 'green'
                            createAndPlayVideo()
                          } else {
                            x.error = '错误'
                            x.color = 'red'
                          }
                          setArr([...arr])
                        }}/>
                        <span style={{color: x.color}}>{x.error}</span>
                      </>
                      : <span>{x.val}  </span>
                }
              </React.Fragment>
            })
          }
        </div>

        <div>
          <Button onClick={e => {
            arr.forEach((x, i) => {
              if (!x.isHidden) {
                return;
              }
              if (x.val !== x.ans) {
                x.color = 'red'
                x.error = x.ans
              } else {
                x.color = 'green'
              }
            })
            setArr([...arr])
          }}>确定</Button>
          <Button onClick={async e => {
            (await axios({
              method: "post",
              url: "/api/nodejieba/save",
              data: {
                value:arr
              }
            })).data.data
          }}>保存题目</Button>
        </div>
      </>
  )
}

export default Index
